<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UniverSheet Excel Editor</title>
    <!-- UniverSheet CSS -->
    <link href="https://unpkg.com/@univerjs/style-univer/base.css" rel="stylesheet">
</head>
<body>
    <h2>UniverSheet Excel 编辑器</h2>
    <!-- Excel 编辑页面的容器 -->
    <div id="univer-container" style="height: 600px;"></div>

    <!-- UniverSheet JS -->
    <script src="https://unpkg.com/@univerjs/core"></script>
    <script src="https://unpkg.com/@univerjs/base-sheets"></script>
    <script src="https://unpkg.com/@univerjs/style-univer"></script>
    <script src="https://unpkg.com/@univerjs/numfmt-plugin"></script>
    <script src="https://unpkg.com/@univerjs/formula-plugin"></script>
    <script src="https://unpkg.com/@univerjs/clipboard-plugin"></script>
    <script src="https://unpkg.com/@univerjs/print-plugin"></script>
    <script src="https://unpkg.com/@univerjs/undo-plugin"></script>
    <script src="https://unpkg.com/@univerjs/toolbar-plugin"></script>
    <script src="https://unpkg.com/@univerjs/sheet-plugin"></script>
    <script src="https://unpkg.com/@univerjs/over-grid-plugin"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 创建 UniverSheet 核心对象
            const univerSheetConfig = {
                extensions: {
                    numfmt: true,     // 数字格式化
                    formula: true,    // 公式支持
                    clipboard: true,  // 剪切板功能
                    print: true,      // 打印功能
                    undo: true,       // 撤销/重做功能
                },
                selections: [
                    { startRow: 0, startColumn: 0, endRow: 5, endColumn: 5 }
                ],
            };

            const sheetData = {
                sheets: [
                    {
                        name: "Sheet1",
                        cellData: {
                            0: {
                                0: { v: "Hello UniverSheet!" },
                                1: { v: "A2" }
                            },
                            1: {
                                0: { v: "B1" },
                                1: { v: "B2" }
                            }
                        }
                    }
                ]
            };

            // 初始化 UniverSheet
            const univerSheet = UniverSheet.newInstance('univer-container', univerSheetConfig);

            univerSheet.setData(sheetData);

            console.log('UniverSheet initialized successfully!');
        });
    </script>
</body>
</html>
